<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                template="/template/OutletManagementTemplate.xhtml">

    <ui:define name="contentInsert">
        <!--        <p:growl id="growl" showDetail="true" infoIcon="true"/>-->
        <p:messages id="msg"/>
        <h:form id="updateForm">
            <h:panelGrid id="panel" columns="4">
                <h:outputLabel value="Enter Date: " />
                <p:calendar value="#{reservationManagedBean.selectedDate}"/>
                <!--                        <p:inputMask id="date" mask="99/99/9999" 
                                                     value="#c{reservationManagedBean.dateStr}"/>-->
                <p:commandButton id="dateSubmit" value="Submit" ajax="false"
                                 update="reservationList" />
                <p:ajaxStatus style="width:20px;height:20px;">
                    <f:facet name="start">
                        <h:graphicImage value="http://www.primefaces.org:8080/showcase/design/ajaxloading.gif" />
                    </f:facet>
                    <f:facet name="complete">
                        <h:outputText value="" />
                    </f:facet>
                </p:ajaxStatus>
            </h:panelGrid>


            <!--                </h:form>
                            <h:form>-->

            <p:dataTable var="reservation" value="#{reservationManagedBean.reservationByDate}" 
                         id="reservationList" paginator="true" rows="20">
                <f:facet name="header">  
                    <p:outputPanel style="text-align: right">  
                        <h:outputText value="#Reservations confirmed: #{reservationManagedBean.getNumResConfirmed()}" />  
                    </p:outputPanel>  
                </f:facet>  
                <p:column style="width:5%">
                    <p:rowToggler/>
                </p:column>
                <p:column headerText="Id" style="width:5%">
                    <h:outputText value="#{reservation.id}"/>
                </p:column>
                <p:column headerText="Date" style="width:30%">
                    <h:outputText value="#{reservation.dateStr}"/>
                </p:column>
                <p:column headerText="Timeslot" style="width:15%" sortBy="#{reservation.timeslot.time}">
                    <h:outputText value="#{reservation.timeStr}"/>
                </p:column>
                <p:column headerText="Area" style="width:10%" >
                    <h:outputText value="#{reservation.area.areaName}"/>
                </p:column>
                <p:column headerText="#Diner" style="width:5%" >
                    <h:outputText value="#{reservation.numPpl}"/>
                </p:column>
                <p:column headerText="Status" style="width:5%">
                    <h:outputText id="status" value="#{reservation.statusStr}"/>
                </p:column>

                <p:column headerText="Option" style="width:5%">
                    <p:commandButton value="Confirm" ajax="true" 
                                     actionListener="#{reservationManagedBean.confirmOneReservation}" 
                                     update="msg, updateForm:reservationList" 
                                     disabled="#{reservation.confirmStatus}"> 
                        <f:attribute name="res" value="#{reservation}" />
                    </p:commandButton> 
                </p:column>
                <p:rowExpansion>
                    <p:column headerText="Comment" style="width:100%">
                        <h:outputText id="comment" value="Customer comment: #{reservation.comments}"/>
                    </p:column>
                </p:rowExpansion>
            </p:dataTable>  
        </h:form>
    </ui:define>
</ui:composition>